<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css" />

    <script src="/custom/js/jquery.min.js"></script>
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/vue/dist/vue.min.js"></script>
</head>
<body>

    <div style="margin-top: 20px" id="app">

        <form class="form-horizontal"  @submit.prevent="submit">
            <div class="form-group">
                <label for="content" class="col-sm-1 control-label">内容:</label>
                <div class="col-sm-10">
                    <textarea rows="10" class="form-control" name="content" id="content" v-model="content"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="title" class="col-sm-1 control-label">标题:</label>
                <div class="col-sm-10">
                    <textarea rows="10" class="form-control" name="title" id="title" v-model="title"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10">
                    <button type="reset" class="btn btn-default">清空</button>
                    <button type="submit" class="btn btn-default">生成</button>

                    <a :class="{ hidden: downloadUrlHidden }" :href="downloadUrl">下载压缩包</a>

                </div>
            </div>
        </form>

    </div>

    <script>


        var app = new Vue({
            el: "#app",
            data: {
                downloadUrl: '',
                downloadUrlHidden: true,
                content: '',
                title: ''
            },
            methods: {
                submit: function () {

                    var post_data = {
                        'title': this.title,
                        'content': this.content
                    };

                    $.ajax({
                        url: '/',
                        data: JSON.stringify(post_data),
                        type: 'POST',
                        contentType: 'application/json',
                        dataType: 'JSON',
                        processData: false,
                        success: function (data) {

                            if(data["status"]){
                                console.log(data);
                                app.downloadUrl = data["zipUrl"];
                                app.downloadUrlHidden = false;
                            }
                        }

                    })
                }
            }
        })



    </script>

</body>
</html>